<template>
	<view class="container">
		<!-- 顶部信息卡片 (复用 Exchangerecords 样式) -->
		<view class="record-item top-info-card">
			<!-- 主信息区 -->
			<view class="item-main">
				<image class="goods-image" :src="details.goodsImg || '/static/img/default_goods.png'" mode="aspectFill"></image>
				<view class="item-info-wrapper">
					<view class="goods-title-line">
						<text class="goods-name">{{details.goodsName}}</text>
						<text class="goods-code">x{{details.quantity}}</text>
					</view>
					<view class="item-info">
						<text class="info-label">兑换盟友: </text>
						<text class="info-content">{{details.userName}}({{details.userPhone}})</text>
					</view>
					<view class="item-info">
						<text class="info-label">申请时间: </text>
						<text class="info-content">{{details.createDate}}</text>
					</view>
                    <view class="item-info">
						<text class="info-label">兑换方式: </text>
						<text class="info-content">{{details.methodExchange === '1' ? '快递邮寄兑换' : '当面兑换'}}</text>
					</view>
				</view>
			</view>
			<!-- 积分信息 -->
			<view class="item-points">
				<image class="points-icon" src="/static/img/icon_points.png" mode="aspectFit"></image>
				<text class="points-value">{{details.price*details.quantity}}积分</text>
			</view>
		</view>

		<!-- 邮寄地址 (与 ApproveExchange 类似) -->
		<view class="section address-section" v-if="details.exchangeMethod === '1' || details.methodExchange === '1'">
			<view class="section-header">
                <text class="section-title">邮寄地址：</text>
                <button class="copy-button" size="mini" @click="copyAddress">复制</button>
            </view>
            <!-- 添加兑换用户信息 -->
            <view class="exchange-user">
                <text class="user-label">兑换用户：</text>
                <text class="user-value">{{details.userName}} ({{details.userPhone}})</text>
            </view>
            <view class="address-content">
                <view class="address-line">
                    <text class="recipient-name">{{details.recipientName || details.userName}}</text>
                    <text class="recipient-phone">{{details.recipientPhone || details.userPhone}}</text>
                </view>
                <view class="address-detail">{{details.mailingAddress || details.mailingAddress}}</view>
            </view>
		</view>

		<!-- SN号 (仅展示) -->
		<view class="section sn-section">
			<text class="section-title">SN号 ({{snList.length}}台)：</text>
            <view class="sn-list">
                <view v-if="snList.length === 0" class="empty-sn">暂无SN号</view>
                <view class="sn-item" v-for="(sn, index) in snList" :key="index">
                    <text class="sn-number">{{sn}}</text>
                    <!-- 详情页不显示删除按钮 -->
                </view>
                 <!-- 详情页不显示新增按钮 -->
            </view>
		</view>
        
        <!-- 加载提示 -->
        <view v-if="loading" class="loading-indicator">加载中...</view>
	</view>
</template>

<script>
const api = require('../../../config/api');
const util = require('../../../utils/util');

export default {
	data() {
		return {
            recordId: null,
			details: { // 存储记录详情
                goodsImg: '',
                goodsName: '',
                goodsCode: '',
                allyName: '',
                allyPhone: '',
                applyTime: '',
                exchangeMethod: '',
                points: '',
                recipientName: '',
                recipientPhone: '',
                fullAddress: '',
            },
			snList: [], // 存储已出库的SN号列表
            loading: true,
		};
	},
	onLoad(options) {
        if (options.id) {
            this.recordId = options.id;
            console.log('recordId:', this.recordId);
            this.fetchExchangeDetails();
        } else {
            uni.showToast({ title: '无效的记录ID', icon: 'none' });
            uni.navigateBack();
        }
	},
	methods: {
        // 获取兑换详情
        async fetchExchangeDetails() {
            this.loading = true;
            try {
                // 调用真实API
                const res = await util.request(
                    api.getExchangeDetailUrl + '/' + this.recordId,
                    {},
                    'POST'
                );
                
                console.log('兑换详情:', res);
                
                if (res.code !== 0) {
                    uni.showToast({ title: res.msg || '加载详情失败', icon: 'none' });
                    return;
                }
                
                this.details = res.data;
                
                // 处理SN列表
                if (res.data.snNos) {
                    // 优先处理snNos字段（逗号分隔的字符串）
                    if (typeof res.data.snNos === 'string') {
                        this.snList = res.data.snNos.split(',').filter(sn => sn.trim() !== '');
                    } 
                    // 如果已经是数组则直接使用
                    else if (Array.isArray(res.data.snNos)) {
                        this.snList = res.data.snNos;
                    }
                } else {
                    this.snList = [];
                }
                
            } catch (error) {
                console.error("加载详情失败:", error);
                uni.showToast({ title: '网络错误', icon: 'none' });
            } finally {
                this.loading = false;
            }
        },

        // 复制地址
		copyAddress() {
            if (!this.details.fullAddress && !this.details.mailingAddress) return;
            
            const addressText = `${this.details.userName} ${this.details.userPhone}\n${this.details.recipientName || this.details.userName} ${this.details.recipientPhone || this.details.userPhone}\n${this.details.fullAddress || this.details.mailingAddress}`;
            
            uni.setClipboardData({
                data: addressText,
                success: () => {
                    uni.showToast({ title: '地址已复制', icon: 'success' });
                },
                fail: () => {
                     uni.showToast({ title: '复制失败', icon: 'none' });
                }
            });
		},
	}
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
    padding-bottom: 20rpx; // 底部留白
}

/* --- 复用 Exchangerecords.vue 和 ApproveExchange.vue 的样式 --- */
.record-item {
    background-color: #fff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
    
    &.top-info-card {
        margin: 20rpx;
    }
    
    .item-main {
        display: flex;
        align-items: center; 
    }
    
    .goods-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        background-color: #f0f0f0; 
        flex-shrink: 0; 
    }
    
    .item-info-wrapper {
        flex: 1; 
        min-width: 0; 
        
        .goods-title-line {
            display: flex;
            justify-content: space-between; 
            align-items: center;
            margin-bottom: 10rpx;
            
            .goods-name {
                font-size: 30rpx;
                font-weight: 500;
                color: #333;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-right: 10rpx; 
            }
            
            .goods-code {
                font-size: 28rpx;
                color: #999;
                white-space: nowrap; 
                flex-shrink: 0; 
            }
        }
        
        .item-info {
            font-size: 26rpx; 
            color: #666;
            margin-bottom: 6rpx; 
            display: flex;
            align-items: center;
            overflow: hidden;
            
            .info-label {
                color: #999;
                margin-right: 5rpx; 
                white-space: nowrap; 
            }
            
            .info-content {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    
    .item-points {
        display: flex;
        justify-content: flex-end; 
        align-items: center;
        margin-top: 15rpx; 
        
        .points-icon {
            width: 36rpx; 
            height: 36rpx;
            margin-right: 8rpx;
        }
        
        .points-value {
            font-size: 30rpx; 
            color: #FF5B5B;
            font-weight: 500;
            white-space: nowrap; 
        }
    }
}

.section {
    background-color: #fff;
    margin: 0 20rpx 20rpx 20rpx;
    padding: 30rpx;
    border-radius: 10rpx;
    box-shadow: 0 2rpx 6rpx rgba(0,0,0,0.05);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
}

.copy-button {
    border: 1rpx solid #6A9FFB;
    color: #6A9FFB;
    background-color: #fff;
    padding: 5rpx 20rpx;
    line-height: 1.5;
    font-size: 24rpx;
    border-radius: 6rpx;
    margin: 0;
     &::after {
        border: none;
    }
}

.address-section {
    .exchange-user {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        padding-bottom: 10rpx;
        border-bottom: 1rpx dashed #eee;
        
        .user-label {
            color: #999;
            margin-right: 10rpx;
        }
        
        .user-value {
            font-weight: 500;
        }
    }
    
    .address-content {
        font-size: 28rpx;
        color: #333;
        line-height: 1.6;
        .address-line {
            margin-bottom: 5rpx;
            .recipient-phone {
                margin-left: 20rpx;
            }
        }
    }
}

.sn-section {
    .sn-list {
        margin-top: 10rpx;
    }
    
    .empty-sn {
        text-align: center;
        color: #999;
        font-size: 26rpx;
        padding: 30rpx 0;
    }
    
    .sn-item {
        // display: flex; // 不再需要 flex，因为只有一个元素
        // justify-content: space-between;
        // align-items: center;
        padding: 20rpx 0;
        border-bottom: 1rpx solid #f5f5f5;
        
        .sn-number {
            font-size: 28rpx;
            color: #333;
            word-break: break-all; // 防止长SN溢出
        }
        
        &:last-child {
            border-bottom: none;
        }
    }
}

.loading-indicator {
    text-align: center;
    color: #999;
    padding: 40rpx 0;
    font-size: 28rpx;
}

/* --- 不再需要 footer-bar --- */

</style>
